<template>
	<view class="container">
		<!-- <image src="../../static/drawable-ldpi/bg.png" class="login-img"></image> -->

		<uni-transition ref="ani" custom-class="transition" :duration="500" :mode-class="modeClass" :styles="styles"
			:show="show" v-if="show">
			<view class="card">
				<view class="title">
					医疗所救治平台登录
				</view>

				<uni-forms ref="form" :rules="rules" :modelValue="loginParams">
					<uni-forms-item class="login-user" label="账号" name="username" label-width="50">
						<uni-easyinput type="text" v-model="loginParams.username" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item class="login-password" label="密码" name="password" label-width="50">
						<uni-easyinput type="password" v-model="loginParams.password" placeholder="请输入密码" />
					</uni-forms-item>
					<uni-forms-item class="login-user" name="Offline">

						<radio :checked="isChecked" @tap="()=>isChecked = !isChecked" active-background-color="#3f6212"
							style="color: #666666;">离线登录
						</radio>
					</uni-forms-item>
				</uni-forms>

				<view class="button">
					<button class="login" @click="submit('form')">登录</button>
					<button class="setup" @click="show = !show">设置IP</button>
				</view>
			</view>
		</uni-transition>
		<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="!show"
			v-else>
			<view class="card">
				<view class="title">
					医疗所救治平台设置IP地址
				</view>

				<uni-forms ref="form" :rules="ipRules" :modelValue="setUpParams">
					<uni-forms-item class="login-user" name="address">
						<uni-easyinput type="text" v-model="setUpParams.address" placeholder="请输入IP地址" />
					</uni-forms-item>
					<uni-forms-item class="login-password" name="serve">
						<uni-easyinput type="text" v-model="setUpParams.serve" placeholder="请输入端口号" />
					</uni-forms-item>
				</uni-forms>


				<view class="button">
					<button class="login" @click="confirmHandle('form')">确定</button>
				</view>
			</view>
		</uni-transition>
	</view>



</template>

<script>
	import {
		login
	} from '../../api/login.js'
	import {
		
		useRouter,
		setStorageSync,
		removeStorageSync
	} from '../../utils/utils.js'
	import {
		log
	} from '../../common/util.js'
	export default {
		data() {
			return {
				// 输入框切换
				styles: {},
				show: true,
				modeClass: 'slide-right',
				isChecked: false,

				//登录验证
				rules: {
					// 对name字段进行必填验证
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},

						]
					},
					// 对email字段进行必填验证
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},

						]
					}
				},
				offline: 0,
				loginParams: {
					userName: '',
					passWord: '',

				},
				// IP验证
				ipRules: {
					// 对name字段进行必填验证
					address: {
						rules: [{
								required: true,
								errorMessage: '请输入IP地址',
							},

						]
					},
					// 对email字段进行必填验证
					serve: {
						rules: [{
								required: true,
								errorMessage: '请输入端口号',
							},

						]
					}
				},
				setUpParams: {
					address: null,
					serve: null
				},
				path: null
			}
		},
		methods: {
			// async getLogin() {
			// 	let res = await login()
			// 	console.log(res);
			// }
			// IP切换 确认验证
			confirmHandle(ref) {
				this.$refs[ref].validate().then(res => {
					removeStorageSync('base_url')
					this.path = 'http://' + this.setUpParams.address + ':' + this.setUpParams.serve
					setStorageSync('base_url', this.path)
					this.show = !this.show
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 登录提交验证
			submit(ref) {
				log(this.isChecked)
				if (this.isChecked) {
					setStorageSync('token', this.isChecked)
					useRouter('/pages/index/index', {}, 'switchTab')

					return
				}
				this.$refs[ref].validate().then(res => {

					login(res).then(res => {

						setStorageSync('token', res.token)
						if (res.code === 200) {
							// uni.switchTab({
							// 	url: '/pages/index/index'
							// })
							useRouter('/pages/index/index', {}, 'switchTab')
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},

			setupHandle() {
				// uni.navigateTo({
				// 	url: '/pages/setting/index'
				// })
			},

		}
	}
</script>

<style lang="scss">
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		/* 设置容器的宽高 */
		width: 100%;
		height: 80vh;
		/* 或者设置具体的高度值 */
	}

	.card {
		.title {
			text-align: center;
			color: #115e59;
			height: 150rpx;
			line-height: 150rpx;
			font-weight: 700;
			font-size: 36rpx;
		}

		background-color: rgba(19, 78, 74, 0.3);
		// height: 800rpx;

		width: 600rpx;
		// margin: 0 auto;
		border-radius: 30rpx;
		// padding-top: 100rpx;
		box-sizing: border-box;
		padding: 60rpx;

		.button {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 20rpx;

			button {
				width: 100%;
				margin-left: 30rpx;
				border-radius: 50rpx;
				background-color: #115e59;
				color: #FFFFFF;

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}

	.login-img {
		width: 100%;
	}

	.login-user {
		margin: 0rpx auto;
		width: 80%;


	}

	.login-password {
		margin: 0rpx auto;
		width: 80%;

	}
</style>